<template>
	<tm-fullView>
		<tm-menubars title="图片裁剪" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-32">基本示例</view>
			<view class="flex-center mb-32">
				<image v-if="src" :src="src" :style="{width:`${width}rpx`,height:`${height}rpx`}"></image>
			</view>
			
			<view  class="flex-between">
				<tm-button style="width:46%" block @click="isArc=false; show=true" >方形裁剪图片框</tm-button>
				<tm-button style="width:46%" block @click="isArc=true;show=true" >圆形裁剪图片框</tm-button>
			</view>
			<view class="my-32">
				<tm-checkbox dense v-model="isRatio" label="允许用户控制裁剪框"></tm-checkbox>
			</view>
			<view class="text-size-s  mt-32">剪裁图片内：原图可以随意移动，缩放。裁剪框也可以随意移动，缩放，也可以禁止用户缩放裁剪框大小。总之操作非常简单便捷，功能比大多数市场的要好。</view>
			<view class="text-size-s  mt-32">主要应用场景：头像，海报，文章图片，产品图片的裁剪等。</view>
		</tm-sheet>
		<tm-avatarCrop :isRatio="isRatio" :isArc="isArc" v-if="show" @confirm="cof" @cancel="show=false"></tm-avatarCrop>
	</tm-fullView>

</template>

<script>
	
	import tmAvatarCrop from '@/tm-vuetify/components/tm-avatarCrop/tm-avatarCrop.vue';
	import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
	import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
	import tmFullView from '@/tm-vuetify/components/tm-fullView/tm-fullView.vue';
	import tmCheckbox from '@/tm-vuetify/components/tm-checkbox/tm-checkbox.vue';
	export default {
		components: {
			tmAvatarCrop,tmMenubars,tmSheet,tmButton,tmFullView,tmCheckbox
		},
		data() {
			return {
				src:'',
				show:false,
				isArc:false,
				isRatio:false,
				width:300,
				height:300
			};
		},
		methods: {
			cof() {
				this.show=false;
				const {width,height,src} = arguments[0];
				this.src=src
				this.width =width /( uni.upx2px(750)/750)
				this.height = height / (uni.upx2px(750)/750)
				
			}
		},
	}
</script>

<style lang="scss">

</style>
